<template>
	<view class="ag-listprocess">
		<view class="ag-listprocess__item">
			<text class="ag-listprocess__title">事务类型：{{WoTransTypeName}}</text>
			<text class="ag-listprocess__time">{{WoTransDate}}</text>
			<text class="ag-listprocess__desc">{{RelatedUserName}}</text>
		</view>
		<view class="ag-listprocess__divider"></view>
	</view>
</template>
<script>
	export default {
		props: {
			WoHistoryId: {
				type: String,
				default () {
					return ""
				}
			},
			WoTransTypeName: {
				type: String,
				default () {
					return ""
				}
			},
			WoTransType: {
				type: String,
				default () {
					return ""
				}
			},
			WoTransDate: {
				type: String,
				default () {
					return ""
				}
			},
			RelatedUserName: {
				type: String,
				default () {
					return ""
				}
			},
		},
	}
</script>
<style lang="scss">
	.ag-listprocess {
		background-color: #ffffff;
		box-shadow: 0px 0px 8rpx 0px rgba(0, 0, 0, 0.2);
		border-radius: 4rpx;
		margin: 0 40rpx;
		display: flex;
		flex-direction: column;
		position: relative;

		&__divider {
			height: 1px;
			background-color: #cccccc;
			margin: 0 20rpx;
			transform: scaleY(.5);
		}

		&__item {
			height: 150rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 0 20rpx;
			padding-right: 200rpx;
		}

		&__title {
			color: #3d85db;
			font-size: 30rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		&__desc {
			color: #404040;
			margin-top: 10rpx;
			font-size: 24rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		&__time {
			color: #808080;
			position: absolute;
			right: 20rpx;
			font-size: 20rpx;
			margin-top: -15rpx;
			font-weight: 300;
		}
	}
</style>
